<template>
	<el-card style="margin: 15px; background-color:#E4E7ED; min-height: calc(100vh - 80px)">
		<h1 style="margin: 20px;">用户留言</h1>
		<el-card style="width:70%; margin-top: 10px;" v-for="(item,index) in Data" :key="index">

			<el-divider content-position="left">
				<el-icon>
					<message />
				</el-icon>用户{{item.username}}的留言:
			</el-divider>
			<p style="margin-left: 20px;">{{item.content}}</p>
			<p style="float: right;">{{item.createTime}}</p>
		</el-card>

		<div style="margin: 10px 0">
			<el-pagination v-model:currentPage="pageNum" :page-size="pageSize" :page-sizes="[8, 12]" :total="total"
				layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
				@current-change="handleCurrentChange">
			</el-pagination>
		</div>
	</el-card>




</template>

<script>
	export default {
		name: "Online",
		data() {
			return {
				Data: [],
				pageNum: 1,
				pageSize: 5,
				total: 0,

			}
		},



		created() {
			this.load();
			this.loading = true;
			setTimeout(() => {
				//设置延迟执行
				this.loading = false;
			}, 500);
		},

		methods: {
			load() {
				let url = "/online/" + this.pageNum + "/" + this.pageSize;
				this.$api.get(url).then((res) => {
					this.Data = res.data.data.records;
					this.Data.forEach((item) => {
						this.$api.get("/user/" + item.userId).then((res) => {
							item.username = res.data.data.username
						})
					})

					this.total = res.data.data.total;
					this.loading = false;
				});

			},

			handleSizeChange(pageSize) {
				//改变每页个数
				this.pageSize = pageSize;
				this.load();
			},
			handleCurrentChange(pageNum) {
				//改变页码
				this.currentPage = pageNum;
				this.load();
			},

		}
	}
</script>

<style>
</style>
